<template>
  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="C">
      <div class="saerchbox">
        <input name="" type="text" placeholder="请输入您要搜索的内容"><img src="/assets/images/ss.png">
      </div>
    </div>
    <div class="R">
      <router-link to="/home/map">
        <img src="/assets/images/map.png">
      </router-link>
    </div>
  </div>
  <div class="clear"></div>
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="item in recommend" :key="item.id">
      <img :src="item.thumbs_text" height="300" fit="cover" />
    </van-swipe-item>
  </van-swipe>

  <div class="clear"></div>
  <div class="lqgwBox">
    <ul>
      <li>
        <router-link to="/product/index">
          <img src="/assets/images/quanbu.png">
          <p>全部商品</p>
        </router-link>
      </li>
      <li><a href="live.html"><img src="/assets/images/zibo.png">
          <p>商品直播</p>
        </a></li>
      <li>
        <router-link to="/home/coupon/index">
          <img src="/assets/images/youhui.png">
          <p>优惠活动</p>
        </router-link>
      </li>
      <li>
        <router-link to="/product/ranking">
          <img src="/assets/images/bandan.png">
          <p>榜单排行</p>
        </router-link>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
  <ul class="proul">
    <li v-for="item in newslist" :key="item.id">
      <div class="con">
        <router-link :to="{path:'/product/detail', query:{pid: item.id}}">
          <div id="conli"><img :src="item.thumbs_text"></div>
          <p><span>￥</span>{{item.price}}</p>
        </router-link>
      </div>
    </li>
  </ul>
  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>
  <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue'
const { proxy } = getCurrentInstance()
// 推荐的轮播图
const recommend=ref([]);
const newslist=ref([]);

// 挂载前加载出数据
onBeforeMount(()=>{
  getHomeData()
})
const getHomeData = async ()=>{
  let result=await Api.HomeIndex()
  if (result.code == 1) {
    recommend.value=result.data.recommend
    newslist.value=result.data.newslist
  }
}
</script>

<style>
@import url('/assets/css/banner.css');
.con #conli{
  height: 15vh;
  overflow: hidden;
}
#conli img{
  height: 15vh;
}
</style>